<template>
  <div class="header">
    <div class="content">
      <div></div>
      <p>数字商城管理系统</p>
      <div class="users">
        <p>账号</p>
        <el-input v-model="user"
                  placeholder="请输入账号"></el-input>
      </div>
      <div class="users">
        <p>密码</p>
        <el-input type="password"
                  v-model="pass"
                  placeholder="请输入密码"></el-input>
      </div>

      <div>

        <!-- 登录或注册按钮提交 -->
        <el-button @click='signin'
                   type="success"
                   style="margin: 20px;
        width: 100px;
        height: 30px;">
          登录
        </el-button>
      </div>

    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const ruleForm = reactive({
      pass: '',
      user: '',
    })
    //  onMounted(()=>{
    //    console.log(route.query.code);
    //  })

    // 登录
    const signin = () => {
      console.log(ruleForm.pass, ruleForm.user)
      router.push('/home')
    }
    return { ...toRefs(ruleForm), signin }
  },
}
</script>
<style>
.header {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 254, 254);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../assets/images/2-1.png) no-repeat center;
  background-size: 100%;
}

.content {
  width: 400px;
  height: 300px;
  background-color: #809ddf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

.users {
  /* display: flex; */
  flex-direction: row;
}

.el-form-item {
  margin-right: 40px;
}
</style>